<template>
	<view class="searchCustom">
		<gui-search @inputting="inputting" @confirm="confirm" v-bind="$attrs"></gui-search>
		<view class="list" v-if="isShow" :style="{'top':height}">
			<template v-if="list.length > 0">
				<view class="item" hover-class="item-hover" hover-stay-time="200" v-for="(item, i) in list" :key="i"
					@click="itemClick(item)">{{ item[label] }}</view>
			</template>
		</view>
	</view>
</template>

<script>
	import {
		useI18n
	} from 'vue-i18n';
	import guiSearch from '@/Grace6/components/gui-search.vue'
	import {
		reactive,
		ref
	} from 'vue'
	export default {
		name: "searchCustom",
		props: {
			list: {
				type: Array,
				default: () => {
					return [];
				}
			},
			//列表内要展示的内容 字段 默认name
			label: {
				type: String,
				default: () => {
					return 'name';
				}
			},
			//无内容匹配时的显示
			noData: {
				type: String,
				default: '暂无匹配内容！'
			}
		},
		emits:['get-input-value','confirm-value'],
		setup(props, context) {
			//是否开启模糊匹配
			let isShow = ref(false)
			// 显示查询到的列表值
			const open = () => {
				isShow = true;
			}
			// 隐藏查询到的列表值
			const close = () => {
				isShow = false;
			}
			//用户输入的值
			let inputValue = ref('')
			//获取用户输入的值
			const inputting = () => {
				let value = e.detail.value;
				inputValue.value = value;
				emit('get-input-value', inputValue);
			}
			//用户点击搜索参数
			const confirm = () => {
				emit('confirm-value', inputValue);
			}
			//获取用户点击模糊搜索的值
			const itemClick = (e) => {
				inputValue.value = e[props.label];
				close();
				emit('confirm-value', e);
			}

			return {
				inputting,
				confirm,
				itemClick,
				open,
				close
			}
		}
	}
</script>

<style lang="scss" scoped>
	.searchCustom {
		position: relative;
		background-color: #f5f5f5;

		.list {
			width: 100%;
			max-height: 300rpx;
			background-color: #f5f5f5;
			box-shadow: 0 0 10rpx #888888;
			border-radius: 10rpx;
			z-index: 999;
			position: absolute;
			left: 0;
			overflow: scroll;

			.item {
				padding: 5rpx 0;
				font-size: 28rpx;
				text-align: center;
				margin: 5rpx 0;
			}

			.item-hover {
				background-color: #f5f5f5;
			}
		}
	}
</style>
